<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="medium"
          label-width="140px"
          label-position="left"
          :disabled="!!isDetail"
          :rules="rules"
        >
          <div class="JNPF-common-title mb-20">
            <h2 class="bold">基础信息</h2>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业编码" prop="qybm" required>
                <el-input
                  v-model="dataForm.qybm"
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重大危险源编码" prop="zdwxybm" required>
                <el-input
                  v-model="dataForm.zdwxybm"
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重大危险源名称" prop="zdwxymc" required>
                <el-input
                  v-model="dataForm.zdwxymc"
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地理位置" prop="dz" required>
                <el-select
                  v-model="dataForm.dz"
                  placeholder="请选择"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in dzOptions"
                    :key="index"
                    :label="item.MC"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管辖部门" prop="gxbm" required>
                <el-select
                  filterable
                  v-model="dataForm.gxbm"
                  placeholder="请选择"
                  clearable
                  :style="{ width: '100%' }"
                  @change="getPerson"
                >
                  <el-option
                    v-for="(item, index) in gxbmOptions"
                    :key="index"
                    :label="item.F_FullName"
                    :value="item.F_Id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                ref="fzrInput"
                label="管控负责人"
                prop="gkfzr"
                required
              >
                <el-select
                  filterable
                  v-model="dataForm.gkfzr"
                  placeholder="请先选择管辖部门"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in gkfzrOptions"
                    :key="index"
                    :label="item.realName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="危险源单元类型" prop="dylx" required>
                <el-select
                  v-model="dataForm.dylx"
                  placeholder="请选择"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in dylxOptions"
                    :key="index"
                    :label="item.fullName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投用日期" prop="tyrq" required>
                <el-date-picker
                  v-model="dataForm.tyrq"
                  placeholder="请选择"
                  clearable
                  :style="{ width: '100%' }"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="timestamp"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度" prop="jd" required>
                <el-input
                  v-model="dataForm.jd"
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="wd" required>
                <el-input
                  v-model="dataForm.wd"
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="可能导致的事故" prop="knsg">
                <el-checkbox-group v-model="dataForm.knsg" :style="{}">
                  <el-checkbox
                    v-for="item in knsgOptions"
                    :key="item.id"
                    :label="item.fullName"
                  ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="height: 40px">
              <el-button type="primary" @click="choice">
                选择危险物质
              </el-button>
            </el-col>
            <template>
              <el-col>
                <el-table
                  :data="rightsDate"
                  border
                  stripe
                  :height="heightTable"
                >
                  <el-table-column
                    v-for="info in rightHeader"
                    :key="info.key"
                    :property="info.key"
                    :label="info.label"
                  >
                    <template slot-scope="scope">
                      {{ scope.row[scope.column.property] }}
                    </template>
                  </el-table-column>
                  <el-table-column label="存量(吨)" required>
                    <template slot-scope="scope">
                      <!-- <el-input-number v-model="scope.row.clZhi" placeholder="数字" :step="1" controls-position="" :min="0" @blur="handch(scope.row.id,scope.row.clZhi,scope.row.ljl,scope.row.jzxs)"></el-input-number> -->
                      <el-input-number
                        v-model="scope.row.clZhi"
                        placeholder="数字"
                        :step="1"
                        controls-position=""
                        :min="0"
                        @change="
                          handch(
                            scope.row.id,
                            scope.row.clZhi,
                            scope.row.ljl,
                            scope.row.jzxs
                          )
                        "
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-for="info in rightHeader1"
                    :key="info.key"
                    :property="info.key"
                    :label="info.label"
                  >
                    <template slot-scope="scope">
                      {{ scope.row[scope.column.property] }}
                    </template>
                  </el-table-column>
                  <el-table-column label="比值(qi/Qi)">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.biZhi"
                        placeholder="请输入"
                        clearable
                        disabled
                        :style="{ width: '100%' }"
                        prefix-icon=""
                        suffix-icon=""
                      >
                        <template slot="prepend"></template>
                        <template slot="append"></template>
                      </el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </template>
          </el-row>
          <!--  -->
          <div class="JNPF-common-title mb-20">
            <h2 class="bold">辨识记录</h2>
          </div>
          <el-row :gutter="20" class="custom-row">
            <el-col :span="12">
              <el-form-item label="比值之和" prop="bzzh" required>
                <el-input
                  v-model="dataForm.bzzh"
                  placeholder="请输入"
                  clearable
                  disabled
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辨识结果" prop="bsjg" required>
                <el-input
                  v-model="dataForm.bsjg"
                  placeholder="请输入"
                  clearable
                  disabled
                  :style="{ width: '100%' }"
                  prefix-icon=""
                  suffix-icon=""
                >
                  <template slot="prepend"></template>
                  <template slot="append"></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="fjRecord">
            <div class="JNPF-common-title mb-20">
              <h2 class="bold">分级记录</h2>
            </div>
            <el-row :gutter="20" class="custom-row">
              <el-col :span="12">
                <el-form-item label="厂外暴露人员数量" prop="cwsl" required>
                  <!-- <el-input-number v-model="dataForm.cwsl" placeholder="人数" :step="1" controls-position="" :min="0" @blur="handchRS(dataForm.cwsl)"> -->
                  <el-input-number
                    v-model="dataForm.cwsl"
                    placeholder="人数"
                    :step="1"
                    controls-position=""
                    :min="0"
                    @change="handchRS(dataForm.cwsl)"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="暴露人员校正系数" prop="blxs" required>
                  <el-input
                    v-model="dataForm.blxs"
                    placeholder="请输入"
                    clearable
                    disabled
                    :style="{ width: '100%' }"
                    prefix-icon=""
                    suffix-icon=""
                  >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="R值" prop="rz" required>
                  <el-input
                    v-model="dataForm.rz"
                    placeholder="请输入"
                    clearable
                    disabled
                    :style="{ width: '100%' }"
                    prefix-icon=""
                    suffix-icon=""
                  >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="危险源等级" prop="wxydj" required>
                  <el-select
                    v-model="dataForm.wxydj"
                    placeholder=""
                    clearable
                    disabled
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in wxydjOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <div class="JNPF-common-title mb-20">
            <h2 class="bold">管控措施</h2>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="管控措施" prop="gkcs" required>
                <el-input
                  v-model="dataForm.gkcs"
                  placeholder="请输入"
                  show-word-limit
                  :style="{ width: '100%' }"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 1000 }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <GoodsBox
        v-if="goodsBoxVisible"
        ref="goodsBox"
        @refreshDataList="initList"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import GoodsBox from "./WxwzBox";
import { departmentPerson } from "@/api/systemIntegration/recard";
export default {
  components: { GoodsBox },
  data() {
    return {
      fjRecord: false, //-
      goodsBoxVisible: false, //-
      heightTable: "90px",
      visible: false,
      isDetail: false,
      dataForm: {
        zdwxybm: undefined,
        zdwxymc: undefined,
        dz: "",
        gxbm: undefined,
        gkfzr: undefined,
        knsg: [],
        jd: undefined,
        wd: undefined,
        dylx: "",
        bzzh: undefined,
        bsjg: undefined,
        cwsl: undefined,
        blxs: undefined,
        rz: undefined,
        wxydj: "",
        tyrq: undefined,
        // wxwz:undefined,//////
        gkcs: undefined,
        qybm: undefined,
        sortCode: 0, //-
      },
      rules: {
        qybm: [
          {
            required: true,
            message: "请输入企业编码",
            trigger: "blur",
          },
        ],
        zdwxybm: [
          {
            required: true,
            message: "请输入重大危险源编码",
            trigger: "blur",
          },
        ],
        zdwxymc: [
          {
            required: true,
            message: "请输入重大危险源名称",
            trigger: "blur",
          },
        ],
        dz: [
          {
            required: true,
            message: "请输入地理位置",
            trigger: "blur",
          },
        ],
        gxbm: [
          {
            required: true,
            message: "请输入管辖部门",
            trigger: "blur",
          },
        ],
        gkfzr: [
          {
            required: true,
            message: "请输入管控负责人",
            trigger: "blur",
          },
        ],
        knsg: [
          {
            required: true,
            message: "请输入可能导致的事故",
            trigger: "blur",
          },
        ],
        jd: [
          {
            required: true,
            message: "请输入经度",
            trigger: "blur",
          },
        ],
        wd: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
        ],
        dylx: [
          {
            required: true,
            message: "请输入危险源单元类型",
            trigger: "blur",
          },
        ],
        bzzh: [
          {
            required: true,
            message: "请输入比值之和",
            trigger: "blur",
          },
        ],
        bsjg: [
          {
            required: true,
            message: "请输入辨识结果",
            trigger: "blur",
          },
        ],
        cwsl: [
          {
            required: true,
            message: "请输入厂外暴露人员数量",
            trigger: "blur",
          },
        ],
        blxs: [
          {
            required: true,
            message: "请输入暴露人员校正系数",
            trigger: "blur",
          },
        ],
        rz: [
          {
            required: true,
            message: "请输入R值",
            trigger: "blur",
          },
        ],
        wxydj: [
          {
            required: true,
            message: "请输入危险源等级",
            trigger: "blur",
          },
        ],
        tyrq: [
          {
            required: true,
            message: "请输入投用日期",
            trigger: "blur",
          },
        ],
        // wxwz:[
        // {
        //   required:true,
        //   message:'请输入拥有的危险物质',
        //   trigger:'blur'
        // },
        // ],
        gkcs: [
          {
            required: true,
            message: "请输入管控措施",
            trigger: "blur",
          },
        ],
      },
      dzOptions: [],
      gxbmOptions: [],
      gkfzrOptions: [],
      knsgOptions: [
        { fullName: "爆炸", id: "爆炸" },
        { fullName: "火灾", id: "火灾" },
        { fullName: "灼烫", id: "灼烫" },
        { fullName: "中毒和窒息", id: "中毒和窒息" },
        { fullName: "其他", id: "其他" },
      ],
      dylxOptions: [
        { fullName: "储存单元", id: "储存单元" },
        { fullName: "生产单元", id: "生产单元" },
      ],
      wxydjOptions: [
        { fullName: "一级", id: "01" },
        { fullName: "二级", id: "02" },
        { fullName: "三级", id: "03" },
        { fullName: "四级", id: "04" },
        { fullName: "不构成危化品重大危险源", id: "05" },
      ],

      //-
      rightHeader: [
        { label: "序号", key: "code" },
        { label: "危险物质名称", key: "hxpmc" },
      ],
      rightHeader1: [
        { label: "临界量(吨)", key: "ljl" },
        { label: "β值", key: "jzxs" },
      ],
      rightsDate: [],
    };
  },
  created() {
    this.getDzOptions();
    this.getGxbmOptions();
    // this.getGkfzrOptions();
  },
  watch: {
    "dataForm.gxbm": {
      handler(newVal, oldVal) { 
        if (newVal && oldVal != undefined) { 
          this.getPerson();
          this.dataForm.gkfzr = undefined;
          this.$nextTick(() => {
            this.$refs["fzrInput"].clearValidate();
          });
        }
      },
    },
  },
  methods: {
    getDzOptions() {
      previewDataInterface("e7b2c31f5a7147c08629c5409dd7fdf4").then((res) => {
        this.dzOptions = res.data;
      });
    },
    getGxbmOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.gxbmOptions = res.data;
      });
    },
    // getGkfzrOptions() {
    //   previewDataInterface("8bca424f16d6448ab09e57a028853aa9").then((res) => {
    //     this.gkfzrOptions = res.data;
    //   });
    // },
    async getPerson() {
      const { data } = await departmentPerson({
        organizeId: this.dataForm.gxbm,
      });
      this.gkfzrOptions = data.list;
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      if (isDetail == true) {
        this.fjRecord = true;
      }
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            // url: '/api/System/ZDWXY/' + this.dataForm.id,
            url: "/api/System/QYSCZDWXY/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            this.dataForm.knsg = this.dataForm.knsg
              ? this.dataForm.knsg.split(",")
              : [];
            this.rightsDate = JSON.parse(res.data.wxwz);
            this.heightTable = this.rightsDate.length * 50 + 40 + "px";
            this.getPerson()
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.dataForm.knsg = this.dataForm.knsg.join(",");
          this.dataForm.wxwz = JSON.stringify(this.rightsDate);
          if (!this.dataForm.id) {
            request({
              // url: '/api/System/ZDWXY',
              url: "/api/System/QYSCZDWXY",
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
          // else {
          //   request({
          //     // url: '/api/System/ZDWXY/' + this.dataForm.id,
          //     url: '/api/System/QYSCZDWXY/' + this.dataForm.id,
          //     method: 'PUT',
          //     data: this.dataForm
          //   }).then((res) =>{
          //     this.$message({
          //       message: res.msg,
          //       type: 'success',
          //       duration: 1000,
          //       onClose: () =>{
          //         this.visible = false;
          //         this.$emit('refresh', true);
          //       }
          //     })
          //   })
          // }
        }
      });
    },

    //---
    choice() {
      this.goodsBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.goodsBox.init();
      });
    },
    initList(list) {
      this.rightsDate = [];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        let item = {
          id: e.id,
          code: i + 1,
          hxpmc: e.hxpmc,
          clZhi: undefined,
          ljl: e.ljl,
          jzxs: e.jzxs,
          biZhi: undefined,
        };
        this.rightsDate.push(item);
        this.heightTable = list.length * 50 + 40 + "px";
      }
    },

    handch(Id, clZhi, ljl, jzxs) {
      // console.log('id:', Id, '存量:', clZhi, ',临界量:', ljl, 'β值:', jzxs);
      let that = this;
      let bzzh = 0;
      for (let i = 0; i < that.rightsDate.length; i++) {
        if (that.rightsDate[i].id == Id) {
          that.rightsDate[i].biZhi = clZhi / ljl; //比值
        }
      }
      for (let i = 0; i < that.rightsDate.length; i++) {
        bzzh += that.rightsDate[i].biZhi;
      }
      that.dataForm.bzzh = bzzh; //比值之和
      if (that.dataForm.bzzh > 1) {
        that.dataForm.bsjg = "已构成危险品重大危险源";
        that.fjRecord = true;
        that.dataForm.cwsl = undefined; //厂外暴露人员数量
      } else if (that.dataForm.bzzh <= 1) {
        that.fjRecord = false;
        that.dataForm.bsjg = "未构成危险品重大危险源";
        that.dataForm.cwsl = 0; //厂外暴露人员数量
        that.dataForm.blxs = 0; //暴露人员校正系数
        that.dataForm.rz = 0; //R值
        that.dataForm.wxydj = "05"; //危险源等级
      }
      // let num = that.dataForm.cwsl;
      // that.handchRS(num);
    },
    handchRS(num) {
      // console.log('人数：',num);
      let that = this;
      let r = 0;
      if (num >= 100) {
        r = 2.0;
      } else if (num >= 50 && num <= 99) {
        r = 1.5;
      } else if (num >= 30 && num <= 49) {
        r = 1.2;
      } else if (num >= 1 && num <= 29) {
        r = 1.0;
      } else if (num == 0) {
        r = 0.5;
      }
      that.dataForm.blxs = r;
      let R = 0;
      let listHe = 0;
      for (let i = 0; i < that.rightsDate.length; i++) {
        let z =
          (that.rightsDate[i].jzxs * that.rightsDate[i].clZhi) /
          that.rightsDate[i].ljl;
        // console.log(z);
        listHe = listHe + z;
      }
      R = r * listHe;
      that.dataForm.rz = R; //R值
      if (R >= 100) {
        that.dataForm.wxydj = "01"; //危险源等级
      } else if (R >= 50 && R < 100) {
        that.dataForm.wxydj = "02"; //危险源等级
      } else if (R >= 10 && R < 50) {
        that.dataForm.wxydj = "03"; //危险源等级
      } else if (R < 10) {
        that.dataForm.wxydj = "04"; //危险源等级
      }
    },
  },
};
</script>
<style lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>